<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>登录</title> 
    <link href="${ctx}/statics/css/base.css" rel="stylesheet">
    <link href="${ctx}/statics/css/login/login.css" rel="stylesheet">
	<style type="text/css">
		.hide {
			display : none;
		}
		
	</style>
</head> 
<body>
	<div class="login-hd">
		<div class="left-bg"></div>
		<div class="right-bg"></div>
		<div class="hd-inner">
			<span class="logo"></span>
			<span class="split"></span>
			<span class="sys-name">蓝领安装服务商订单系统</span>
		</div>
	</div>
	<div class="login-bd">
		<div class="bd-inner">
			<div class="inner-wrap">
				<div class="lg-zone">
					<div class="lg-box">
						<div class="lg-label"><h4>用户登录</h4></div>
						<div class="alert alert-error hide">
			              <i class="iconfont">&#xe62e;</i>
			              <span>请输入用户名</span>
			            </div>
						<div id="formbody">
						</div>
					</div>
				</div>
				<div class="lg-poster"></div>
			</div>
		</div>
	</div>
	<div class="login-ft">
		<div class="ft-inner">
			<div class="about-us">
				<a href="javascript:;">关于我们</a>
				<a href="javascript:;">法律声明</a>
				<a href="javascript:;">服务条款</a>
				<a href="javascript:;">联系方式</a>
			</div>
			<div class="address">地址：江苏省南京市雨花台区软件园&nbsp;邮编：210019&nbsp;&nbsp;Copyright&nbsp;©&nbsp;2015&nbsp;-&nbsp;2016&nbsp;uimaker-专注于ui设计&nbsp;版权所有</div>
			<div class="other-info">建议使用IE8及以上版本浏览器&nbsp;苏ICP备&nbsp;09003078号&nbsp;E-mail：admin@uimaker.com</div>
		</div>
	</div>
</body>
<script id="usernameandpassword" type="text/html">
	<form class="from0" action="${ctx}/login" method="post">
		<div class="lg-username input-item clearfix">
			<i class="iconfont">&#xe60d;</i>
			<input type="text" name="username" placeholder="请输入用户名">
		</div>
		<div class="lg-password input-item clearfix">
			<i class="iconfont">&#xe634;</i>
			<input type="password" name="password" placeholder="请输入密码">
		</div>
		<div class="tips clearfix">
			<a href="javascript:;" class="register" id="toggle-to-phone-btn">短信快捷登录</a>
		</div>
		<div class="enter" style="padding-left: 110px;">
			<a class="supplier" id="username-login-btn" style="cursor:pointer">登录</a>
		</div>
	</form>
</script>

<script id="phone" type="text/html">
	<form class="form1" action="${ctx}/phonelogin" method="post">
		<div class="lg-username input-item clearfix">
			<i class="iconfont">&#xe60d;</i>
			<input type="text" name="mobile" placeholder="请输入手机号" maxlength="11">
		</div>
		<div class="lg-check clearfix">
			<div class="input-item">
				<i class="iconfont">&#xe633;</i>
				<input type="text" name="yzm" placeholder="验证码">
			</div>
			<span class="check-code" style="cursor:pointer">发送验证码</span>
		</div>
		<div class="tips clearfix">
			<a href="javascript:;" class="register" id="toggle-to-username-btn">用户名密码登录</a>
		</div>
		<div class="enter" style="padding-left: 110px;">
			<a class="supplier" id="phone-login-btn" style="cursor:pointer">登录</a>
		</div>
	</form>
</script>


<script type="text/javascript" src="${ctx}/statics/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/statics/js/template-web.js"></script>
<script type="text/javascript">
	$(function() {
		$('#formbody').on('click', '#toggle-to-phone-btn', function() {
			var html = template('phone');
			$('#formbody').empty().html(html);
		});
		
		var toggleClick = function() {
			var html = template('usernameandpassword');
			$('#formbody').empty().html(html);
		}
		
		$('#formbody').on('click', '#toggle-to-username-btn', toggleClick);
		
		toggleClick();
	
		$('#formbody').on('click', '#username-login-btn', function() {
			var $username = $('[name="username"]');
			var $password = $('[name="password"]');
			if ($.trim($username.val()) == '') {
				$('.alert-error').show();
				$('.alert-error span').text("请输入用户名");
				return;
			}
			if ($.trim($password.val()) == '') {
				$('.alert-error').show();
				$('.alert-error span').text("请输入密码");
				return;
			}
			$('.alert-error').hide();
			
			$('.from0').submit();
		});
		
		
		$('#formbody').on('click', '#phone-login-btn', function() {
			var $mobile = $('[name="mobile"]');
			var $yzm = $('[name="yzm"]');
			if ($.trim($mobile.val()) == '') {
				$('.alert-error').show();
				$('.alert-error span').text("请输入手机号");
				return;
			}
			if ($.trim($yzm.val()) == '') {
				$('.alert-error').show();
				$('.alert-error span').text("请输入验证码");
				return;
			}
			$('.alert-error').hide();
			
			$('.form1').submit();
		});
		
		$('#formbody').on('click', '.check-code', function() {
			// 校验
			
			var $mobile = $('[name="mobile"]');
			var mobile = $mobile.val();
			$.getJSON("${ctx}/sendyzm", {"mobile":mobile}, function(data) {
				if (data.success == true) {
					alert("验证码发送成功");
				} else {
					alert("验证码发送失败");
				}
			});
		});
		
		
		
		
	});
	
	$(function() {
		<#if errorMessage??>
			$('.alert-error').show();
			$('.alert-error span').text("${errorMessage?default("登录失败")}");
		</#if>
	});
</script>
</html>